<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import Stats from 'three/addons/libs/stats.module.js'
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';

let scene, camera, renderer, controls, sta, sphere, spotLight, spotLightHelper, plane, cssRenderer
function init () {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 8;
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  cssRenderer = new CSS2DRenderer()
  cssRenderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(cssRenderer.domElement)
  cssRenderer.domElement.style.position = 'fixed'
  cssRenderer.domElement.style.top = 0
  cssRenderer.domElement.style.left = 0
  cssRenderer.domElement.style.pointerEvents = 'none' //不触发鼠标的交互
}

function create3DDom () {
  const dom = document.createElement('span')
  dom.innerHTML = '球体'
  dom.style.background = '#ff0000'
  dom.style.color = '#fff'
  const dom2D = new CSS2DObject(dom)
  dom2D.position.set(0, 2, 0)
  scene.add(dom2D)
}

//创建精灵物体
function createSprite () {
  //精灵物体：加载半透明纹理图片，始终面向摄像机图片


  // TextureLoader 纹理加载器
  // 作用：图片转换成纹理皮肤对象使用
  const map = new THREE.TextureLoader().load("/baby.png");
  // SpriteMaterial 精灵物体特有材质(map：颜色贴图)
  const material = new THREE.SpriteMaterial({ map: map });
  //创建精灵物体（而非网格物体）
  const sprite = new THREE.Sprite(material);
  sprite.position.set(3, -0.5, 3)
  scene.add(sprite);
}

const createSphere = () => {
  const geometry = new THREE.SphereGeometry(1, 32, 16);
  const material = new THREE.MeshStandardMaterial({
    color: 0xffff00
  })
  sphere = new THREE.Mesh(geometry, material);
  scene.add(sphere);
}

function createFloor () {
  const geometry = new THREE.PlaneGeometry(10, 10);
  const material = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.DoubleSide, roughness: 0 }); //, side: THREE.DoubleSide
  plane = new THREE.Mesh(geometry, material);
  scene.add(plane);
  plane.rotation.x = -Math.PI / 2
  plane.position.y = -1

}

function createLight () {
  spotLight = new THREE.SpotLight(0xffffff, 3)
  spotLight.position.set(3, 3, 3)
  spotLight.map = new THREE.TextureLoader().load('./123.jpg')
  scene.add(spotLight)
  spotLightHelper = new THREE.SpotLightHelper(spotLight)
  scene.add(spotLightHelper)
}

function createAxes () {
  const axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)
}

function resize () {
  window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    cssRenderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
  })
}

function createStats () {
  sta = new Stats()
  sta.setMode(0)
  sta.domElement.style.position = 'fixed'
  sta.domElement.style.top = '0'
  sta.domElement.style.left = '0'
  document.body.appendChild(sta.domElement)
}

function createOrbit () {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.update()
}

//创建阴影
function createShadw () {
  renderer.shadowMap.enabled = true
  spotLight.castShadow = true
  sphere.castShadow = true
  plane.receiveShadow = true
}

let speed = 0.01
function animate () {
  requestAnimationFrame(animate)
  controls.update();
  sta.update()
  renderer.render(scene, camera)
  cssRenderer.render(scene, camera)
}

// 调用初始化
init()
//调用坐标轴
createAxes()
//调用性能监测器
createStats()
//调用监听函数
resize()

//调用球
createSphere()
//调用光源
createFloor()
//调用环境光
createLight()

//调用创建阴影
createShadw()

//12、调用创建的dom
create3DDom()

//调用精灵物体创建函数
createSprite()
//调用轨道控制器
createOrbit()
//渲染器
animate()
//三者关系是将场景和摄像机传给渲染器
renderer.render(scene, camera)


</script>

<template></template>

<style scoped>
</style>
